<template>
    <div
        class="jobDetail"
        v-if="!$util.isEmpty(detail)">
        <!-- <van-nav-bar
            :title="$route.meta.title"
            left-text=""
            border
            left-arrow
             @click-left="$router.back()"
            /> -->
        <div
            class="jobDetail_content"
           >
            <div class="job_header">
                <div class="job_title">
                    {{detail.title}}
                </div>
                <div class="job_money">
                    {{detail.salary}}
                </div>
                <div class="job_address">
                    <span>{{detail.area_id}} |</span>
                    <span> 招{{detail.numbers}}人</span>
                </div>
            </div>
            <div class="job-des_content">
                <h3>职位描述</h3>
                <div class="des">
                    <pre>{{detail.requirements}}</pre>
                </div>
            </div>
            <div class="job-des_content">
                <h3>经验要求</h3>
                <div class="des">
                    <pre>{{detail.education}}</pre>
                </div>
            </div>
            <div class="job-des_content">
                <h3>公司福利</h3>
                <div class="des">
                    <pre>{{detail.welfare}}</pre>
                </div>
            </div>
        </div>
        <div class="job_content-address">
            <div class="company_addresss">
                    <div class="address_left">
                        <p class="main_p">公司地址</p>
                        <p class="main_ci">{{address}}</p>
                    </div>
                    <div class="addres_right">
                        <img :src="`${constant.imgUrl}design/company/icon_nav.png`" alt="" class="contact_img">
                    </div>
            </div>
            <div class="contact">
                <div class="address_left">
                    <p class="main_p">联系电话</p>
                    <p class="main_ci">{{phone}}</p>
                </div>
                <a class="contact_way" :href="`tel:${phone}`">
                    <img :src="`${constant.imgUrl}design/telep.png`" alt="" class="contact_img">
                </a>
            </div>
         </div>
    </div>
</template>

<script>
import $apiCompany from '@/api/company'
// import { area } from '@/mixins'
export default {
	name: 'jobDetail',
	// mixins: [area],
	data() {
		return {
			detail: null,
			address: null,
			phone: null,
			query: null,
			constant: this.$constant
		}
	},
	computed: {
		// currentCity() {
		// 	if (!this.$util.isEmpty(this.detail)) {
		// 		return this.formatCityInit(this.detail.area_id.split(','))
		// 	}
		// }
	},
	onLoad(val) {
		this.query = val
		this.address = val.address
		this.phone = val.phone
	},
	mounted() {
		this.init()
	},
	methods: {
		init() {
			$apiCompany.detailJobJob({
				id: this.query.id
			})
				.then(res => {
					if (res.status == 'success') {
						this.detail = res.data
					} else {
						uni.showToast({
							title: res.errors.message,
							duration: 2000,
							icon: 'none'
						})
					}
				})
		}
	}
}
</script>

<style lang="scss" scoped>
    .jobDetail{
        min-height: 100%;
        background-color: #ffffff;
    }
    .jobDetail_content{
        padding: 30px;
        font-size: 0;
        box-sizing: border-box;
        .job_header {
            padding-left: 10px;
             & > .job_title {
            font-size: 34px;
            color: "#333333";
            font-weight: 500;
            }
            & > .job_money{
                font-size: 34px;
                color: #ff6900;
                margin: 32px 0 29px;
            }
            & > .job_address{
                font-size: 24px;
                color: #999999;
            }

        }
        & .job-des_content{
            h3{
                font-size: 34px;
                font-weight: 400;
                color: #333333;
                margin: 60px 0 26px;
            }
            & .des{
               white-space: normal;
               font-size: 30px;
               color: #999999;
               pre{
                 white-space: pre-wrap; /*css-3*/
                white-space: -moz-pre-wrap; /*Mozilla,since1999*/
                white-space: -pre-wrap; /*Opera4-6*/
                white-space: -o-pre-wrap; /*Opera7*/
                word-wrap: break-word; /*InternetExplorer5.5+*/
               }
            }
        }
    }
    .job_content-address{
        padding: 0 30px;
        margin-top: 28px;
        .company_addresss{
                width: 100%;
                height: 166px;
                border-radius: 20px;
                margin-bottom: 20px;
                box-shadow: 0px 1px 20px #cccccc;
                .address_left{
                    float: left;
                    margin: 30px 0 0 30px;
                    width: 50%;
                    p:nth-child(2){
                        margin-top: 10px;
                        display: -webkit-box;
                        word-break: break-all;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        /*! autoprefixer: off */
                        -webkit-box-orient: vertical;
                        /* autoprefixer: on */
                    }
                }
                .addres_right{
                    float: right;
                    margin-top: 60px;
                    margin-right: 50px;
                    height: 50px;
                    width: 96px;
                    border-left: 1px solid #dddddd;
                }
            }
            .main_p{
                font-size: 30px;
                color: #333333;
                font-weight: bold;
            }
            .main_ci{
                font-size: 24px;
                color: #999999;
                line-height: 36px;
            }
            .contact{
        width: 100%;
        height: 128px;
        border-radius: 20px;
        margin-bottom: 20px;
        margin-bottom: 120px;
        box-shadow: 0px 1px 20px #cccccc;
    }
    .address_left{
        float: left;
        margin: 30px 0 0 30px;
        width: 50%;
    }
    .contact_way{
        float: right;
        margin-top: 39px;
        margin-right: 50px;
        height: 50px;
        width: 96px;
        border-left: 1px solid #dddddd;
    }
    .contact_img{
        width: 44px;
        height: 44px;
        float: right;
        margin-top: 3px;
    }
    }

</style>
